vue封装自定义指令，通过权限判断元素显示隐藏 |
您所在的位置：网站首页 › vue 自定义指令 权限 › vue封装自定义指令，通过权限判断元素显示隐藏 |
|
目录
官方文档vue2封装指令及注册1.封装2.注册
vue3指令封装及注册1.封装2.注册
使用
官方文档
vue2官方文档：https://v2.cn.vuejs.org/v2/guide/custom-directive.html vue3官方文档：https://cn.vuejs.org/guide/reusability/custom-directives.html （以下示例是个人项目中的使用，具体怎么使用看情况修改） vue2封装指令及注册 1.封装 import store from '@/store' export default { inserted: (el, binding) => { let { value } = binding const usrInfo = store.state?.userDetailInfo // 取存起来的用户信息 if (value?.length > 6) value = value.substring(0, 6) const permissions = usrInfo && usrInfo.authorityCode if (!value) { el.parentNode && el.parentNode.removeChild(el) return } const permissionFlag = value //判断是否有权限 const hasPermissions = permissions.split(',').indexOf(permissionFlag) if (hasPermissions === -1) { el.parentNode && el.parentNode.removeChild(el) } } } 2.注册在main.js中注册： import hasOperatePermi from '@/directive/hasOperatePermi' Vue.directive('hasOperatePermi', hasOperatePermi) vue3指令封装及注册 1.封装 import store from '@/store' export default { mounted(el, binding, vnode) { let { value } = binding if (value?.length > 6) value = value.substring(0, 6) // 取存起来的用户信息 const permissions = store.getters && store.getters.authorityCode if (!value) { el.parentNode && el.parentNode.removeChild(el) return } const permissionFlag = value //判断是否有权限 const hasPermissions = permissions.split(',').indexOf(permissionFlag) if (!hasPermissions) { el.parentNode && el.parentNode.removeChild(el) } } } 2.注册在main.js中注册： import hasOperatePermi from '@/directive/hasOperatePermi' app.directive('hasOperatePermi', hasOperatePermi) 使用 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |